<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CLAP - Live Chat</title>

  <style>
        body {
            font-family: Arial, sans-serif;
            background-color: yellow;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

.container {
            text-align: center;
            background-color: yellow;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 300px;
            margin: auto;
            flex-grow: 1; /* Ensures the container takes up available space */
            overflow-y: auto; /* Ensures that the content is scrollable if necessary */
        }

    h1 {
      color: blue;
    }

    p {
      color: #333;
    }

    .note {
      font-size: 12px;
      margin-top: 10px;
      color: #555;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>CLAP Live Chat</h1>
    <p>Need help? Chat with us instantly using the button at the bottom right.</p>
    <p class="note">Our support team is available 24/7.</p>
  </div>

  <!-- Tawk.to Live Chat Integration -->
  <script type="text/javascript">
    var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = 'https://embed.tawk.to/669f0919becc2fed692923c4/1i3ejn3g5';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();
  </script>

</body>
</html>